<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>订单结算页面</title>

    <link href="assets/css/amazeui.css" rel="stylesheet" type="text/css"/>

    <link href="basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>

    <link href="css/jsstyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="js/sweetalert/sweetalert.css" rel="stylesheet"/>

    <script type="text/javascript" src="js/address.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript" src="js/bootstrap3.js"></script>

</head>

<body>

<header th:replace="mall/header::header-user"></header>
<nav th:replace="mall/header::header-search"></nav>

<div class="clear"></div>
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>确认收货地址 </h3>
            <div class="clear"></div>
            <ul>
                <div class="per-border"></div>
                <li class="user-addresslist defaultAddr">

                    <div class="address-left">
                        <div class="user DefaultAddr">

										<span class="buy-address-detail">
                                            收货地址：
										</span>
                        </div>
                        <div class="default-address DefaultAddr">
                            <span class="buy--address-detail"
                                  th:text="${session.mallUser.address==''?'无':session.mallUser.address}">
                            </span>
                        </div>
                    </div>
                    <div class="address-right">
                        <a href="../person/address.html">
                            <span class="am-icon-angle-right am-icon-lg"></span></a>
                    </div>
                    <div class="clear"></div>

                    <div class="new-addr-btn">
                        <a href="javascript:openUpdateModal();">编辑</a>
                    </div>

                </li>
            </ul>

            <div class="clear"></div>
        </div>

        <!--支付方式-->
        <div class="logistics">
            <h3>选择支付方式</h3>
            <ul class="pay-list">
                <li class="pay qq" onclick="changePay(1)"><img src="images/weizhifu.jpg"/>微信<span></span></li>
                <li class="pay taobao" onclick="changePay(2)"><img src="images/zhifubao.jpg"/>支付宝<span></span></li>
            </ul>
        </div>
        <div class="clear"></div>

        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <div class="cart-table-th">
                    <div class="wp">

                        <div class="th th-item">
                            <div class="td-inner">商品信息</div>
                        </div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div>
                        </div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div>
                        </div>
                        <div class="th th-sum">
                            <div class="td-inner">金额</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <th:block th:each="item : ${myShoppingCartItems}">
                    <tr class="item-list">
                        <div class="bundle  bundle-last">
                            <div class="bundle-main">
                                <ul class="item-content clearfix">
                                    <div class="pay-phone">
                                        <li class="td td-item">
                                            <div class="item-pic">
                                                <a target="_blank" th:href="@{'/detail?goodsId='+${item.goodsId}}"
                                                   href="#" class="J_MakePoint">
                                                    <img th:src="@{${item.goodsCoverImg}}"
                                                         src="images/kouhong.jpg_80x80.jpg"
                                                         class="itempic J_ItemImg"></a>
                                            </div>
                                            <div class="item-info">
                                                <div class="item-basic-info">
                                                    <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11"
                                                       th:text="${item.goodsName}"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-price">
                                            <div class="item-price price-promo-promo">
                                                <div class="price-content">
                                                    <em class="J_Price price-now"
                                                        th:text="${item.sellingPrice}">39.00</em>
                                                </div>
                                            </div>
                                        </li>
                                    </div>
                                    <li class="td td-amount">
                                        <div class="amount-wrapper ">
                                            <div class="item-amount ">
                                                <span class="phone-title">购买数量</span>
                                                <div class="sl" th:text="${item.goodsCount}">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="td td-sum">
                                        <div class="td-inner">
                                            <em tabindex="0" class="J_ItemSum number"
                                                th:text="${item.sellingPrice*item.goodsCount}">117.00</em>
                                        </div>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </tr>
                </th:block>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
        <!--含运费小计 -->
        <div class="buy-point-discharge ">
            <p class="price g_price ">
                合计（含运费） <span>¥</span><em class="pay-sum" th:text="${priceTotal}">244.00</em>
            </p>
        </div>

        <!--信息 -->
        <div class="order-go clearfix">
            <div class="pay-confirm clearfix">
                <div class="box">
                    <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                        <span class="price g_price ">
                                    <span>¥</span> <em class="style-large-bold-red " id="J_ActualFee"
                                                       th:text="${priceTotal}">244.00</em>
											</span>
                    </div>

                    <div id="holyshit268" class="pay-address">

                        <p class="buy-footer-address">
                            <span class="buy-line-title buy-line-title-type">寄送至：</span>
                            <span class="buy--address-detail"
                                  th:text="${session.mallUser.address==''?'无':session.mallUser.address}">
                            </span>
                        </p>
                    </div>
                </div>

                <div id="holyshit269" class="submitOrder">
                    <div class="go-btn-wrap">
                        <a href="#" id="saveOrder" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>

    <div class="clear"></div>
</div>
</div>
<div th:replace="mall/footer::footer-fragment"></div>
</div>
<div class="clear"></div>
</body>
<div class="theme-popover-mask"></div>
<div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
     aria-labelledby="personalInfoModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h6 class="modal-title" id="personalInfoModalLabel">地址修改</h6>
            </div>
            <div class="modal-body">
                <form id="personalInfoForm">
                    <div class="form-group">
                        <input type="hidden" id="userId" th:value="${session.mallUser.userId}">
                        <label for="address" class="control-label">收货地址:</label>
                        <input type="text" class="form-control" id="address" name="address"
                               placeholder="请输入收货地址" th:value="${session.mallUser.address}"
                               required="true">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveButton">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var payType = 0;
    function changePay(type){
        if(type==1){
            swal("暂不支持微信支付", {
                icon: "error",
            });
            return;
        } else {
            payType = type;
        }
    }
    $('#saveOrder').click(function () {
        if (payType == 0) {
            swal("请选择支付方式", {
                icon: "error",
            });
            return;
        }
        var userAddress = $(".buy--address-detail").html();
        if (userAddress == '' || userAddress == '无') {
            swal("请填写收货信息", {
                icon: "error",
            });
            return;
        }

        $.ajax({
            type: 'POST',//方法类型
            url: '/saveOrder?payType=' + payType,
            contentType: 'application/json',
            success: function (result) {
                if (result.resultCode == 200) {
                    // 跳转支付页面
                    window.location.href="/pay?orderNo=" + result.message;
                } else {
                    $('#personalInfoModal').modal('hide');
                    swal(result.message, {
                        icon: "error",
                    });
                };
            },
            error: function () {
                swal('操作失败', {
                    icon: "error",
                });
            }
        });
    });

    function openUpdateModal() {
        $('#personalInfoModal').modal('show');
    }

    //绑定modal上的保存按钮
    $('#saveButton').click(function () {
        var address = $("#address").val();
        var userId = $("#userId").val();
        var data = {
            "userId": userId,
            "address": address
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/personal/updateInfo',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    $('#personalInfoModal').modal('hide');
                    window.location.reload();
                } else {
                    $('#personalInfoModal').modal('hide');
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal('操作失败', {
                    icon: "error",
                });
            }
        });
    });

</script>
</html>